import React, { Component } from 'react'
import { Form, Input, Button,message} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import axios from '../../http/http.js'
// import axios from 'axios';
import './index.less'
import loginImg from '../../assets/imgs/login.png'



export default class Login extends Component {
    state={
        username:'',
        password:'',
        asideArr:'',//存储home页面侧边导航菜单的数据
    }
    //登录函数
    onFinish= async (values)=>{
        //更新state的值
       this.setState({
           username:values.username,
           password:values.password
       })
        const res= await axios.post('/login/user',{
            username:this.state.username,
            password:this.state.password
        })
        // console.log(res);
        if(res.code===200){
            this.setState({asideArr:res.data[0]});
            const {name,id}=res.data[1].admin;//用户名和用户id
            const token =res.data[1].token;//获取token
            sessionStorage.setItem('name',name);
            sessionStorage.setItem('uid',id)
            localStorage.setItem('token',token);
            sessionStorage.setItem('aside',JSON.stringify(this.state.asideArr));
            message.success('登录成功',0.5)
            this.props.history.push('/home')
        }else{
            message.error('账号或密码错误',0.5)
        }

    }
    render() {
        // console.log(this.props);
        return (
            <div id='login'>
                <div className='left-img'></div>
                <div className='right-login'>
                    <div className='login-img'>
                        <img src={loginImg} alt="登录图标" />
                        <h1 className='title'>订餐管理系统</h1>
                    </div>
                    <div className='login-input'>
                        <Form
                        name="normal_login"
                        className="login-form"
                        initialValues={{
                            remember: true,
                        }}
                        
                        onFinish={this.onFinish}
                        >
                        <Form.Item
                            name="username"
                            rules={[
                            {
                                required: true,
                                whitespace:true,
                                message: '用户名不能为空!',
                            },
                            {min:4,message:"用户名至少为4位"},
                            {max:12,message:'用户名最多为12位'},
                            {pattern:/^[a-zA-Z0-9_]+$/,message:'用户名必须是英文，数字或下换线组成'}
                            ]}
                        >
                            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                        </Form.Item>
                        <Form.Item
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    whitespace:true,
                                    message: '密码不能为空!',
                                },
                                {min:4,message:"密码至少为4位"},
                                {max:12,message:'密码最多为12位'},
                                {pattern:/^[a-zA-Z0-9_]+$/,message:'用户名必须是英文，数字或下换线组成'}
                            ]}
                        >
                            <Input
                            prefix={<LockOutlined className="site-form-item-icon" />}
                            type="password"
                            placeholder="请输入密码"
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                            登录
                            </Button>
                        </Form.Item>
                    </Form>
                    </div>
                </div>
            </div>
        )
    }
}
